<!--
 * @Author: geyulan 18500325526@163.com
 * @Date: 2023-03-06 11:22:41
 * @LastEditors: geyulan 18500325526@163.com
 * @LastEditTime: 2023-12-13 11:28:24
 * @FilePath: /coupon-laxin/src/pages/chooseStore.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="content">
      <div class="search-wrap">
        <div class="score-box">
          <div class="score-left">
            <span>总积分</span>
            <span>{{allPoints}}</span>
          </div>
          <div class="score-right" @click="show=true">
            <span>积分规则</span>
          </div>
        </div>
        <div class="tab">
          <span v-for="item in tabList" :key="item.id" :class="[item.id === tabActive ? 'active' : '']" @click="tabChange(item.id)">{{item.name}}</span>
        </div>
      </div>
      <div class="search-content">
        <van-list
          v-show="scoreList.length"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          >
          <div class="item-list" v-for="item in scoreList" :key="item.id">
            <div class="list-left">
              <span>{{ item.tradeTypeName }}</span>
              <span>时间：{{ item.createTime  }}</span>
            </div>
            <div class="list-right">
              <span :class="[tradeList.includes(item.tradeType) ? 'add' : 'incream']">{{ tradeList.includes(item.tradeType) ? '+' : '' }}{{ item.points }}</span>
            </div>
          </div>
        </van-list>
        <van-empty v-show="searchFlag && !scoreList.length" description="暂无数据" />
      </div>
      <van-loading v-show="globalLoading" class="global-loading" type="spinner" color="#db1f2a" />
      <van-popup v-model="show" :overlay="true">
        <div class="tips-content">
          <h5>积分规则
            <van-icon @click.self="show=false" name="close" />
          </h5>
          <div class="text">
            <p>
            积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容积分内容
            </p>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import XHR from '../api'
import { Notify } from 'vant'
Vue.use(Notify)
export default {
  data () {
    return {
      scoreList: [],
      loading: false,
      finished: false,
      searchFlag: false,
      pageNum: 1,
      pageSize: 10,
      globalLoading: false,
      tabActive: 0,
      tabList: [{
        id: 0,
        name: '全部'
      }, {
        id: 1,
        name: '获取'
      }, {
        id: 2,
        name: '消耗'
      }],
      show: false,
      tradeList: [2, 9],
      allPoints: null
    }
  },
  created () {
    this.onLoad('search')
    this.getAllPoints()
  },
  methods: {
    close () {
      this.show = false
    },
    // 获取积分明细
    onLoad (searchFlag) {
      if (searchFlag) {
        this.pageNum = 1
        this.scoreList = []
        this.finished = false
        this.searchFlag = false
        this.globalLoading = true
      }
      let payload = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.tabActive) {
        payload.pointsType = this.tabActive
      }
      XHR.queryPointsRecord(payload)
        .then(res => {
          const { data, resultCode, resultMsg } = res.data
          if ('' + resultCode === '0') {
            this.scoreList = [...this.scoreList, ...data.list]
            this.pageNum += 1
            this.loading = false
            if (this.scoreList.length >= data.total) {
              this.finished = true
            }
            if (searchFlag || this.searchFlag) {
              this.searchFlag = true
            }
            this.globalLoading = false
          } else {
            Notify({ type: 'danger', message: resultMsg, duration: 1000 })
            this.globalLoading = false
          }
        })
        .catch(() => {
          this.globalLoading = false
          Notify({ type: 'danger', message: '网络错误', duration: 1000 })
        })
    },
    // 获取积分总额
    getAllPoints () {
      XHR.getAvailablePoints()
        .then(res => {
          const { data, resultCode } = res.data
          if ('' + resultCode === '0') {
            this.allPoints = data
          }
        })
        .catch(() => {
        })
    },
    onCancel () {
      this.$router.go(-1)
    },
    tabChange (id) {
      this.tabActive = id
      this.onLoad('search')
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  .search-wrap {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    .score-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 60px 34px;
      background: #d96164;
      span {
        color: #fff;
      }
      .score-left {
        display: flex;
        flex-direction: column;
        span {
            font-size: 32px;
            text-align: center;
          &:last-of-type {
            margin-top: 20px;
            font-size: 54px;
            font-weight: bold;
          }
        }
      }
      .score-right {
        span {
          font-size: 32px;
        }
      }
    }
    .tab {
      display: flex;
      background: #fff;
      span {
        flex: 1;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        color: #525159;
        font-weight: bold;
        border-bottom: 2px solid #efefef;
        &.active {
          color: #d96164;
        }
      }
    }
  }
  .item-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 34px;
    border-bottom: 2px solid #efefef;
    &:last-of-type {
      border-bottom: none;
    }
    .list-left {
      display: flex;
      flex-direction: column;
      max-width: 500px;
      span {
        font-size: 32px;
        color: #525159;
        &:first-of-type {
          margin-bottom: 10px;
        }
      }
    }
    .list-right {
      span {
        font-size: 32px;
        color: #525159;
      }
      .add {
        color: #d96164;
      }
      .incream {
        color: #55b87f;
      }
    }
  }
  /deep/.van-popup {
    width: 90%;
    height: 80%;
    border-radius: 8px;
  }
  .tips-content {
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    h5,p {
      width: 100%;
    }
    h5 {
      padding: 20px 0;
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      text-align: center;
      background: #fff;
      /deep/.van-icon-close {
        font-size: 48px;
        position: absolute;
        right: 0;
        top: 18px;
        color: #d96164;
      }
    }
    .text {
      p {
        font-size: 28px;
        line-height: 60px;
        text-align: justify;
      }
    }
  }

  /deep/.van-search {
    flex: 1;
    padding: 20px 0;
  }
  /deep/.van-search__content {
    margin-left: 32px;
    padding: 0 16px;
    border-radius: 6px;
  }
  /deep/.van-search .van-cell {
    padding: 20px 16px 20px 0;
    display: flex;
    align-items: center;
  }
  /deep/.van-field__left-icon .van-icon,
  .van-field__right-icon .van-icon {
    font-size: 30px;
  }
  /deep/.van-field__control {
    font-size: 24px;
  }
  /deep/.van-search__action {
    display: flex;
    padding: 0 32px;
    font-size: 28px;
    line-height: 68px;
    div {
      &:nth-child(1) {
        color: #db1f2a;
      }
      &:nth-child(2) {
        margin-left: 20px;
      }
    }
  }
  /deep/.van-field__clear {
    font-size: 30px;
  }
  .search-content {
    /deep/.van-list {
      padding-bottom: 60px;
    }
    /deep/.van-cell {
      padding: 40px 34px;
      font-size: 28px;
      line-height: 42px;
    }
    .active {
      background: rgba(201, 54, 52, 1);
      color: #fff;
    }
    /deep/.van-loading__text {
      font-size: 28px;
    }
    /deep/.van-loading__spinner {
      width: 28px !important;
      height: 28px !important;
    }
  }
  /deep/.van-list__error-text,
  /deep/.van-list__finished-text,
  /deep/.van-list__loading {
    font-size: 28px;
    margin-top: 10px;
  }
  /deep/.van-empty__image {
    width: 320px;
    height: 320px;
  }
  /deep/.van-empty__description {
    margin-top: 32px;
    padding: 0 120px;
    color: #969799;
    font-size: 28px;
    line-height: 40px;
  }
}
</style>
